<template>
    <div>
        <router-link to="/home">
            <img src="../assets/logo (1).png" alt="">
        </router-link>

        <div style="position: absolute;right:0;width: 100px;height: 30px;">
            <i class="el-icon-user-solid" style="position:absolute;left:-10px;top:20px"></i>
            <el-dropdown>
                <span class="el-dropdown-link">
                    20154A132<i class="el-icon-arrow-down el-icon--right"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <el-button @click="jumpTo1" type="text"><span class="btn">我的</span></el-button>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <el-button @click="jumpTo2" type="text"><span class="btn">设置</span></el-button>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <el-button @click="logout" type="text"><span class="btn">退出账号</span></el-button>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </span>
            </el-dropdown>
        </div>
    </div>
</template>

<script>

export default {
    name: 'Gj_header',
    methods: {
        logout() {
            //清空token
            // window.sessionStorage.clear();
            this.$router.push('/Login')
        },
        jumpTo1(){
            this.$router.push('/Mine');
        },
        jumpTo2(){
            this.$router.push('/Setting');
        }
    }
}
</script>

<style lang="less">
div {
    position: relative;
}

div img {
    position: absolute;
    left: -3px;
    top: 10px;
    width: 180px;
    height: 40px;
}

div .el-dropdown {
    position: absolute;
    right: 0;
    top: 20px;
    background-color: #fff;
}

.el-button--text {
    .btn {
        color: #606662;
    }
}
</style>
